<style type="text/css">
	li.text-con-b{
		position:relative;
	}
	li.text-con-b label.desc-lbl{
		text-align:left;
		width:192px;
	}
	li.text-con-b input.text{
		width:76px;
	}
	span.safe-unit{
		position:absolute;
		left:300px;
		width:100px;
		font-size:14px;
		line-height:34px;
		padding:0 0.5em;
		color:#4F5356;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		li.text-con-b label.desc-lbl {
			width: 241px;
		}
		li.text-con-b input.text {
			width: 126px;
		}
		span.safe-unit {
			left: 400px;
			width: 120px;
			font-size: 18px;
			line-height: 46px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			safe_set = {config = {}}
		}

		local data = tpl_get_data(para, true)
	-%>

	var safeInfo = <%=data%>;

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var safe = ret.safe_set.config;

		initSwitch("FirewallSwitch", safe.enable, function(state){
			if (1 == state){
				$("#Param").show();
			}else{
				$("#Param").hide();
			}
		});

		initSwitch("DosSwitch", safe.dos, function(state){
			if (1 == state){
				$("#DosAttack").show();
			}else{
				$("#DosAttack").hide();
			}
		});

		initSwitch("IcmpSwitch", safe.icmp_flood, function(state){
			if (1 == state){
				$("#IcmpFloodSet").show();
			}else{
				$("#IcmpFloodSet").hide();
				$(".err-note").hide();
			}
		});

		initSwitch("UdpSwitch", safe.udp_flood, function(state){
			if (1 == state){
				$("#UdpFloodSet").show();
			}else{
				$("#UdpFloodSet").hide();
				$(".err-note").hide();
			}
		});

		initSwitch("TcpSwitch", safe.tcp_flood, function(state){
			if (1 == state){
				$("#TcpFloodSet").show();
			}else{
				$("#TcpFloodSet").hide();
				$(".err-note").hide();
			}
		});

		initSwitch("PingSwitch", safe.ping_disable);
		$("#IcmpFlood").val(safe.icmp_threshold);
		$("#UdpFlood").val(safe.udp_threshold);
		$("#TcpFlood").val(safe.tcp_threshold);
	}

	init(safeInfo);

	function errHandle(code)
	{
		switch(code){
		case E_NONE:
			return false;
		case E_ICMP_RANGE:
			showNote(errStr.icmpFloodErr);
			break;
		case E_UDP_RANGE:
			showNote(errStr.udpFloodErr);
			break;
		case E_TCP_SYN_RANGE:
			showNote(errStr.tcpFloodErr);
			break;
		default:
			break;
		}
		return true;
	}

	function checkItems(icmp, udp, tcp) {
		if(!checkNumRange(icmp, 3600, 5)){
			return E_ICMP_RANGE;
		}

		if(!checkNumRange(udp, 3600, 5)){
			return E_UDP_RANGE;
		}

		if(!checkNumRange(tcp, 3600, 5)){
			return E_TCP_SYN_RANGE;
		}

		return E_NONE;
	}

	$("#Save").click(function(){
		var data = {};
		var para = {};
		para.safe_set = {};
		para.safe_set.config = data;

		data.enable = $("#FirewallSwitch").attr("data-value");
		data.dos = $("#DosSwitch").attr("data-value");
		data.icmp_flood = $("#IcmpSwitch").attr("data-value");
		data.udp_flood = $("#UdpSwitch").attr("data-value");
		data.tcp_flood = $("#TcpSwitch").attr("data-value");
		data.ping_disable = $("#PingSwitch").attr("data-value");
		data.icmp_threshold = $("#IcmpFlood").val();
		data.udp_threshold = $("#UdpFlood").val();
		data.tcp_threshold = $("#TcpFlood").val();

		if (errHandle(checkItems(data.icmp_threshold, data.udp_threshold, data.tcp_threshold))){
			return;
		}

		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$.setTimeout(function(){
					closeLoading();
				}, 2000);
			}else{
				errHandle(code);
				closeLoading();
			}
		});
	});

})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/security.png?_=20170809165512" />
			<span class="help-title">{%label.safeMng%}</span>
		</li>
		<li class="summary">{%helpStr.safeMng%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/security.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.safeMng%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-switch">
		<p class="set-con-desc">
			<label class="tip-lbl">{%label.firewall%}</label>
			<span id="FirewallSwitch" class="switch hidden">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</p>
	</ul>
	<div id="Param">
		<ul class="set-con set-con-switch">
			<p class="set-con-desc">
				<label class="tip-lbl">{%label.dosAttack%}</label>
				<span id="DosSwitch" class="switch">
					<i class="switch-circle icon_select_off"></i>
				</span>
			</p>
		</ul>
		<div id="DosAttack">
			<ul class="set-con set-con-switch">
				<p class="set-con-desc">
					<label class="tip-lbl">{%label.icmpFloodAttack%}</label>
					<span id="IcmpSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</p>
			</ul>
			<ul id="IcmpFloodSet" class="set-con">
				<li class="text-con text-con-b">
					<span class="safe-unit">{%label.valueUnit%}</span>
					<label class="desc-lbl">{%label.icmpFloodVal%}</label>
					<input id="IcmpFlood" class="text hover ime-mode-n text-length" maxLength="4" value="" />
				</li>
			</ul>
			<ul class="set-con set-con-switch">
				<p class="set-con-desc">
					<label class="tip-lbl">{%label.udpFloodAttack%}</label>
					<span id="UdpSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</p>
			</ul>
			<ul id="UdpFloodSet" class="set-con">
				<li class="text-con text-con-b">
					<span class="safe-unit">{%label.valueUnit%}</span>
					<label class="desc-lbl">{%label.udpFloodVal%}</label>
					<input id="UdpFlood" class="text hover ime-mode-n text-length" maxLength="4" value="" />
				</li>
			</ul>
			<ul class="set-con set-con-switch">
				<p class="set-con-desc">
					<label class="tip-lbl">{%label.tcpFloodAttack%}</label>
					<span id="TcpSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</p>
			</ul>
			<ul id="TcpFloodSet" class="set-con">
				<li class="text-con text-con-b">
					<span class="safe-unit">{%label.valueUnit%}</span>
					<label class="desc-lbl">{%label.tcpFloodVal%}</label>
					<input id="TcpFlood" class="text hover ime-mode-n text-length" maxLength="4" value="" />
				</li>
			</ul>
			<ul class="set-con set-con-switch">
				<p class="set-con-desc">
					<label class="tip-lbl">{%label.disablePing%}</label>
					<span id="PingSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</p>
			</ul>
			<div class="err-note hidden">
				<i class="err-icon icon_remind_line"></i>
				<p class="note-str"></p>
			</div>		
		</div>
	</div>
	<div class="btn-con">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
</div>